<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="width:50%; margin: auto;">
      <table>
        <thead>
          <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>商品单价</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(product, index) in products" :key="index">
            <td>{{ product.name }}</td>
            <td>
              <button @click="decreaseQuantity(index)">-</button>
              <input v-model="product.quantity" type="number" >
              <button @click="increaseQuantity(index)">+</button>
            </td>
            <td>{{ product.price }}</td>
            <td>{{ product.price * product.quantity }}</td>
            <td>
              <button @click="removeProduct(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div>总数量: {{ totalQuantity }}</div>
      <div>最高单价商品: {{ maxPriceProduct }}</div>
      <div>总金额: {{ totalPrice }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          products: [
            { name: 'iphone5', price: 100, quantity: 1 },
            { name: 'iphone6', price: 200, quantity: 1 },
            { name: 'iphone7', price: 300, quantity: 1 },
          ]
        },
        methods: {
          decreaseQuantity: function (index) {
            if (this.products[index].quantity > 1) {
              this.products[index].quantity--;
            } else {
              this.removeProduct(index);
            }
          },
          increaseQuantity: function (index) {
            this.products[index].quantity++;
          },
          removeProduct: function (index) {
            this.products.splice(index, 1);
          }
        },
        computed: {
          totalQuantity: function () {
            return this.products.reduce((total, product) => total + product.quantity, 0);
          },
          maxPriceProduct: function () {
            let maxPriceProduct = this.products.reduce((max, product) => max.price > product.price ? max : product,0);
            return maxPriceProduct ? maxPriceProduct.name : "无";
          },
          totalPrice: function () {
            return this.products.reduce((total, product) => total + product.price * product.quantity, 0);
          }
        }
      });
    </script>
  </body>
  </html>
</html>